<%@page import="java.util.LinkedHashMap"%>
<%@page import="fr.inserm.u674.chcdbweb.model.DTO.Tissue"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="extraction" tagdir="/WEB-INF/tags/tissueExtractionTags" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tissue List</title>

<jsp:include page="includes/header.jsp"></jsp:include>

<!--DHTMLXCOMMON-->
<script type="text/javascript" src="scripts/dhtmlxwindows-codebase/dhtmlxcommon.js" ></script>

<!-- DHTMLXWINDOWS -->
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlxwindows-codebase/dhtmlxwindows.css">
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlxwindows-codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<script type="text/javascript" src="scripts/dhtmlxwindows-codebase/dhtmlxcontainer.js" ></script>
<script type="text/javascript" src="scripts/dhtmlxwindows-codebase/dhtmlxwindows.js" ></script>

<!-- DHTMLXGRID -->
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlxgrid-codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlxgrid-codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlxgrid-codebase/skins/dhtmlxgrid_dhx_black.css">
<link rel="STYLESHEET" type="text/css" href="scripts/dhtmlxgrid-codebase/skins/dhtmlxgrid_dhx_blue.css">
<script src="scripts/dhtmlxgrid-codebase/dhtmlxgrid.js"></script>
<script src="scripts/dhtmlxgrid-codebase/dhtmlxgridcell.js"></script>
<script src="scripts/dhtmlxgrid-codebase/ext/dhtmlxgrid_srnd.js"></script>
<script src="scripts/dhtmlxgrid-codebase/ext/dhtmlxgrid_selection.js"></script>
<script src="scripts/dhtmlxgrid-codebase/ext/dhtmlxgrid_filter.js"></script>
<script src="scripts/dhtmlxgrid-codebase/ext/dhtmlxgrid_nxml.js"></script>

<!-- DTHMLXDATAPROCESSOR -->
<script  src="scripts/dhtmlxdataprocessor-codebase/dhtmlxdataprocessor.js"></script>
<!--<script  src="scripts/dhtmlxdataprocessor-codebase/dhtmlxdataprocessor_debug.js"></script>-->



<script type="text/javascript" src="scripts/gridCommon.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
<script type="text/javascript" src="scripts/prototype.js"></script>

<script type="text/javascript">
	
	var grid;
	var dp;
	
	var fullVarHash = new Hash( {
			Diagnosis_B_Benign_M_Malignant_NT_Non_tumoral : {
				humanReadableName: 'Simple Diagnosis',
				dataType: "VARCHAR"
			},
			Diagnosis_Group : {
				humanReadableName: 'Group',
				dataType: "VARCHAR"
			},
			Diagnosis_TumorType_recod: {
				humanReadableName: 'Tumor Type Recod.',
				dataType: "VARCHAR"
			}
	});
	
	var varArray ;
	varArray = ['Diagnosis_B_Benign_M_Malignant_NT_Non_tumoral',
	            'Diagnosis_Group',
	            'Diagnosis_TumorType_recod'];
	
	var showQuantities = true;

	function doLoadVars(){
		new Ajax.Request('mainServlet',{
			method: 'POST',
			parameters: {appAction: 'ajaxLoadVarsComboBoxes'},	
			onSuccess: function(transport){
				$('eavVarsComboBoxes').update(transport.responseText);
				for(var i=0;i<varArray.length;i++){
					$(varArray[i]).checked='checked';
				}
			},
			onFailure: function(transport){
				alert(transport.responseText);
			}
		}		
		);
		
		
		new Ajax.Request('mainServlet',{
			method: 'POST',
			parameters: {appAction: 'ajaxLoadVarsArray'},
			onSuccess: function(transport){
				fullVarHash = new Hash(transport.responseText.evalJSON());
			},
			onFailure: function(transport){
				handleErrorResponseWindow(transport.responseText);
			}
		});
		
	}
	
	
	function my_error_handler(node){
        //alert(node.getAttribute("action"));    // error
        handleErrorResponseWindow(node.firstChild.data);    // Details
        return false;
    }
	function doInitDataProcessor(){
		dp = new dataProcessor('mainServlet?appAction=dhtmlxGridUpdateTissues');
		dp.setTransactionMode("POST",false);
		dp.enableDataNames(true);
		dp.defineAction("error",my_error_handler);
		dp.init(grid);
	}

	
	function doInitWin(){
	    dhxWins = new dhtmlXWindows();
	    dhxWins.enableAutoViewport(true);
	    dhxWins.setImagePath("scripts/dhtmlxwindows-codebase/imgs/");
	}

	function doInitGrid(){
		grid = new dhtmlXGridObject('gridContainer');
		grid.setHeader("CHCID,ID,Type,Benign / Malignant / cell Line / Normal Tissue,Tumor Type,Diagnosis Group,Quantity left");
		grid.setColSorting("str,int,str,str,str,str,sub_row_ajax");
		grid.setInitWidths("60,80,50,200,*,*,100");
		grid.setColAlign("left,right,left,right,right,right,right");
		grid.attachHeader(",#numeric_filter,#text_filter,#text_filter,#text_filter,#select_filter_strict,");
		
		commonGridInit(grid);
		
		grid.init();
	}
	
	function doInitGridWithVarArray(varArray,showQuantities){
		var firstHeaderString = "CHCID,ID,Type,Master CHCID";
		var secondHeaderString = ",,,";
		var colIDString = "CHCID,ID,Type,masterTissue";
		var colSortingString = "str,int,str,str";
		var initWidthString = "50,80,50,50";
		var colAlignString = "left,right,left,left";
		var thirdHeaderString= ',#numeric_filter,#text_filter,#text_filter';
		

		
		
		for ( var i = 0; i < varArray.length; i++) {
			var varName = "";
			varName = varArray[i];
			firstHeaderString = firstHeaderString + "," + fullVarHash.get(varName).humanReadableName;
			secondHeaderString = secondHeaderString + "," + varName;
			colIDString = colIDString+ "," + varName;
			colSortingString = colSortingString + ",str";
			initWidthString = initWidthString + ",80";
			colAlignString = colAlignString + ",right";
			if(fullVarHash.get(varName).nMod < 20)
				thirdHeaderString = thirdHeaderString + ",#select_filter_strict";
			else if(fullVarHash.get(varName).dataType == 'VARCHAR')
				thirdHeaderString = thirdHeaderString + ",#text_filter";
			else if(fullVarHash.get(varName).dataType == 'INT' || fullVarHash.get(varName).dataType == 'FLOAT')
				thirdHeaderString = thirdHeaderString + ",#numeric_filter";
			else
				thirdHeaderString = thirdHeaderString + ",#text_filter";
		}

		
		if(showQuantities){
			colAlignString = colAlignString + ",right";
			colSortingString = colSortingString + ",str";
			firstHeaderString = firstHeaderString + ",Tissue Quantity Left";
			secondHeaderString = secondHeaderString + ",";
			initWidthString = initWidthString + ",180";
			thirdHeaderString = thirdHeaderString + ",#text_filter";
		}
		grid = new dhtmlXGridObject('gridContainer');
		
		
		grid.setHeader(firstHeaderString);
		grid.setColumnIds(colIDString);
		grid.setColSorting(colSortingString);
		grid.setInitWidths(initWidthString);
		grid.setColAlign(colAlignString);
		grid.attachHeader(secondHeaderString);
		grid.attachHeader(thirdHeaderString);
		
		
		commonGridInit(grid);
		grid.init();
		
		
	}
	
	function filterTissueGrid(tissuesToKeep){
		var tissuesInGrid = grid.getAllRowIds().split(","); 
		for(var i=0; i< tissuesInGrid.size(); i++ ){
			var tissueInGrid = tissuesInGrid[i];
			if(tissuesToKeep.indexOf(tissueInGrid) == -1){
				grid.deleteRow(tissueInGrid);
			}
		}
	}

	
	function doFillGridWithVarArray(varArray){
		new Ajax.Request('mainServlet',
			{
				method: 'post',
				parameters: {
					appAction: 'ajaxListTissues',
					eavVarJSONArray: Object.toJSON(varArray),
					showTissuesWithNoModalities: $('showTissuesWithNoModalities').checked,
					showTissueQuantities: $('showTissueQuantities').checked
				},
				onComplete : function(transport){
					grid.parse(transport.responseText);
					$('rowCount').update(grid.getRowsNum());
					hideGridSpinnerAndShowGridContainer();
				}
			}	
		);
	}	
	
	function doFillGridWithVarArrayAndTissueArray(varArray,tissueArray){
		new Ajax.Request('mainServlet',
			{
				method: 'post',
				parameters: {
					appAction: 'ajaxListTissues',
					showTissuesWithNoModalities: $('showTissuesWithNoModalities').checked,
					showTissueQuantities: $('showTissueQuantities').checked,
					eavVarJSONArray: Object.toJSON(varArray),
					tissueJSONArray: Object.toJSON(tissueArray)
				},
				onComplete : function(transport){
					grid.parse(transport.responseText);
					$('rowCount').update(grid.getRowsNum());
					hideGridSpinnerAndShowGridContainer();
				},
				onFailure : function(transport){
					handleErrorResponseWindow(transport.responseText); //cf. common.js
				}
			}	
		);
	}
	
	function doSaveGridFile(format){
		reloadVars();
		$('linkContainer').update();
		var tissueArray = null;
		if($('tissueFilter').getValue()!= null && $('tissueFilter').getValue() != ''){
			tissueArray = $('tissueFilter').getValue().split(/[\s\,\;]/);
		}
		
		var varHash = new Hash();
		for(var i=0;i<fullVarHash.keys().size();i++){
			var key = fullVarHash.keys()[i];
			if(varArray.indexOf(key)!=-1){
				var humanReadableName = fullVarHash.get(key).humanReadableName; 
				varHash.set(key,humanReadableName);
			}
			
		}
		new Ajax.Request('mainServlet',{
			method: 'post',
			parameters: {
				appAction: 'ajaxSaveGrid',
				showTissuesWithNoModalities: $('showTissuesWithNoModalities').checked,
				showTissueQuantities: $('showTissueQuantities').checked,
				eavVarJSONArray: Object.toJSON(varArray),
				varHashJSONHash: Object.toJSON(varHash),
				tissueJSONArray: Object.toJSON(tissueArray),
				outputFormat: format
			},
			onComplete : function(transport){
				$('linkContainer').update(transport.responseText);
			},
			onFailure : function(transport){
				handleErrorResponseWindow(transport.responseText); //cf. common.js
			}
		});
	}
	
	function doGridWithVarArray(varArray) {
		hideGridContainerAndShowGridSpinner();
		doInitGridWithVarArray(varArray,showQuantities);
		doFillGridWithVarArray(varArray);
	}
	
	function doGridWithVarArrayAndTissueArray(varArray){
		var tissueArray = $('tissueFilter').getValue().split(/[\s\,\;]/);
		
		hideGridContainerAndShowGridSpinner();
		doInitGridWithVarArray(varArray,showQuantities);
		doFillGridWithVarArrayAndTissueArray(varArray,tissueArray);
	}
	
	function checkAllVars(){
		checkAllBiologicalDataVars();
		checkAllClinicalDataVars();
		checkAllPathologicalDataVars();
		checkAllIHCVars();
		checkAllMiscVars();
		checkAllMutationVars();
		checkAllNTLiverVars();
		checkAllRiskFactorVars();
		checkAllFamilyDataVars();
		checkAllSurvivalAndRelapse();
	}
	function uncheckAllVars(){
		uncheckAllBiologicalDataVars();
		uncheckAllClinicalDataVars();
		uncheckAllPathologicalDataVars();
		uncheckAllIHCVars();
		uncheckAllMiscVars();
		uncheckAllMutationVars();
		uncheckAllNTLiverVars();
		uncheckAllRiskFactorVars();
		uncheckAllFamilyDataVars();
		uncheckAllSurvivalAndRelapse();
	}
	
	function checkAllClinicalDataVars(){
		for(var i=0;i<$$('.clinicalData').length;i++){
			$$('.clinicalData')[i].checked='checked';
		}
	}
	function uncheckAllClinicalDataVars(){
		for(var i=0;i<$$('.clinicalData').length;i++){
			$$('.clinicalData')[i].checked=false;
		}
	}
	
	function checkAllBiologicalDataVars(){
		for(var i=0;i<$$('.biologicalData').length;i++){
			$$('.biologicalData')[i].checked='checked';
		}
	}
	function uncheckAllBiologicalDataVars(){
		for(var i=0;i<$$('.biologicalData').length;i++){
			$$('.biologicalData')[i].checked=false;
		}
	}
	
	function checkAllPathologicalDataVars(){
		for(var i=0;i<$$('.pathologicalData').length;i++){
			$$('.pathologicalData')[i].checked='checked';
			
		}
	}
	function uncheckAllPathologicalDataVars(){
		for(var i=0;i<$$('.pathologicalData').length;i++){
			$$('.pathologicalData')[i].checked=false;
		}
	}
	
	function checkAllRiskFactorVars(){
		for(var i=0;i<$$('.riskFactor').length;i++){
			$$('.riskFactor')[i].checked='checked';
		}
	}
	function uncheckAllRiskFactorVars(){
		for(var i=0;i<$$('.riskFactor').length;i++){
			$$('.riskFactor')[i].checked=false;
		}
	}
	
	function checkAllNTLiverVars(){
		for(var i=0;i<$$('.ntliver').length;i++){
			$$('.ntliver')[i].checked='checked';
		}
	}
	function uncheckAllNTLiverVars(){
		for(var i=0;i<$$('.ntliver').length;i++){
			$$('.ntliver')[i].checked=false;
		}
	}
	
	function checkAllIHCVars(){
		for(var i=0;i<$$('.ihcData').length;i++){
			$$('.ihcData')[i].checked='checked';
		}
	}
	function uncheckAllIHCVars(){
		for(var i=0;i<$$('.ihcData').length;i++){
			$$('.ihcData')[i].checked=false;
		}
	}
	
	function checkAllMutationVars(){
		for(var i=0;i<$$('.mutation').length;i++){
			$$('.mutation')[i].checked='checked';
		}
	}
	function uncheckAllMutationVars(){
		for(var i=0;i<$$('.mutation').length;i++){
			$$('.mutation')[i].checked=false;
		}
	}
	
	function checkAllSurvivalAndRelapse(){
		for(var i=0;i<$$('.survivalAndRelapse').length;i++){
			$$('.survivalAndRelapse')[i].checked='checked';
		}
	}
	function uncheckAllSurvivalAndRelapse(){
		for(var i=0;i<$$('.survivalAndRelapse').length;i++){
			$$('.survivalAndRelapse')[i].checked=false;
		}
	}
	
	function checkAllFamilyDataVars(){
		for(var i=0;i<$$('.familyData').length;i++){
			$$('.familyData')[i].checked='checked';
		}
	}
	function uncheckAllFamilyDataVars(){
		for(var i=0;i<$$('.familyData').length;i++){
			$$('.familyData')[i].checked=false;
		}
	}
	
	function checkAllMiscVars(){
		for(var i=0;i<$$('.misc').length;i++){
			$$('.misc')[i].checked='checked';
		}
	}
	function uncheckAllMiscVars(){
		for(var i=0;i<$$('.misc').length;i++){
			$$('.misc')[i].checked=false;
		}
	}
	
	function doRefresh(){
		reloadVars();
		showQuantities = $('showTissueQuantities').checked;
		doGridWithVarArray(varArray,showQuantities);
		doInitDataProcessor();
	}
	
	function doRefreshWithTissueArray(){
		reloadVars();
		showQuantities = $('showTissueQuantities').checked;
		doGridWithVarArrayAndTissueArray(varArray,showQuantities);
		doInitDataProcessor();
	}
	
	function reloadVars(){
		varArray.clear();
		for (var j=0;j<$$('.clinicalData').length;j++){
			if($$('.clinicalData')[j].checked){
				varArray.push($$('.clinicalData')[j].id);
				
			}
		}
		for (var j=0;j<$$('.biologicalData').length;j++){
			if($$('.biologicalData')[j].checked){
				varArray.push($$('.biologicalData')[j].id);
				
			}
		}
		for (var j=0;j<$$('.riskFactor').length;j++){
			if($$('.riskFactor')[j].checked){
				varArray.push($$('.riskFactor')[j].id);
				
			}
		}
		for (var j=0;j<$$('.pathologicalData').length;j++){
			if($$('.pathologicalData')[j].checked){
				varArray.push($$('.pathologicalData')[j].id);
				
			}
		}
		for (var j=0;j<$$('.ntliver').length;j++){
			if($$('.ntliver')[j].checked){
				varArray.push($$('.ntliver')[j].id);
				
			}
		}
		for (var j=0;j<$$('.ihcData').length;j++){
			if($$('.ihcData')[j].checked){
				varArray.push($$('.ihcData')[j].id);
				
			}
		}
		for (var j=0;j<$$('.mutation').length;j++){
			if($$('.mutation')[j].checked){
				varArray.push($$('.mutation')[j].id);
				
			}
		}
		for (var j=0;j<$$('.familyData').length;j++){
			if($$('.familyData')[j].checked){
				varArray.push($$('.familyData')[j].id);
			}
		}
		for (var j=0;j<$$('.survivalAndRelapse').length;j++){
			if($$('.survivalAndRelapse')[j].checked){
				varArray.push($$('.survivalAndRelapse')[j].id);
			}
		}
		for (var j=0;j<$$('.misc').length;j++){
			if($$('.misc')[j].checked){
				varArray.push($$('.misc')[j].id);
			}
		}
	}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body onload="doInitWin();doLoadVars();doGridWithVarArray(varArray);doInitDataProcessor();">


<div id="container">
<div id="top">
<h1>CHC DB Web</h1>
</div>
<div id="leftnav"><jsp:include page="./includes/leftnav.jsp"></jsp:include></div>
<div id="content" >
<h2>Tissue List</h2>
<fieldset ><legend>Variables</legend>
<div id="eavVarsComboBoxes">
</div>
<br/>
Show lines with no modalities : <input id="showTissuesWithNoModalities"  type="checkbox" >
<br/>
Show tissue quantities : <input id="showTissueQuantities" checked="checked" type="checkbox" >
<br/><br/>

<input style="float: left" type="button" value="SELECT ALL" onClick="checkAllVars();">
<input style="float: left" type="button" value="UNSELECT ALL" onclick="uncheckAllVars();">
<br/>
<br/>
<input type="button" value="Export Grid as Excel" onclick="doSaveGridFile('XLS');">
<input type="button" value="Export Grid as CSV" onclick="doSaveGridFile('CSV');">
<input type="button" value="Export Grid as TXT" onclick="doSaveGridFile('TAB');">
<br/><br/>
<input type="button" value="Refresh Grid" onclick="doRefresh();">

<div id="linkContainer"></div>

</fieldset>
<br/>
<fieldset ><legend>Tissue Filter</legend>

<textarea id="tissueFilter" cols="120" rows="3"></textarea>
<br/>
<input type="button" onClick="doRefreshWithTissueArray();" value="Filter & Refresh">
<input type="button" onClick="doRefresh();" value="Clear Filter & Refresh">
</fieldset>

<br/>
<fieldset><legend>List</legend> 

<div id="barContainer"></div>
<div id="wholeContainer" style="width:1000;height:700px;">
	<div  align="center" id="gridSpinner" style="position: relative;top:45%;" >
		<img src="./images/ajax-loader-1.gif"/>
	</div>
	<div id="gridContainer" style="width:1000;height:700px;">
	</div>
</div>
</fieldset>
<jsp:include page="./includes/dhtmlxgrid-footer.jsp" />

</div>
<div id="footer"><jsp:include page="./includes/footer.jsp"/></div>
</div>
</html>